<template>
  <div class="app-layout">
    <el-header class="top-header">
      <Header/>
    </el-header>

    <div class="sidebar-container" :style="{ width: navWidth }">
      <VerticalNav @toggle-collapse="handleNavToggle"/>
    </div>

    <div class="content-wrapper" :style="{ marginLeft: navWidth }">
      <el-main class="main-body">
        <router-view/>
      </el-main>
      <el-footer class="site-footer-container">
        <Footer/>
      </el-footer>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Header from "@/components/Header.vue";
import VerticalNav from "@/components/VerticalNav.vue";
import Footer from "@/components/Footer.vue";

const navWidth = ref('180px');
const handleNavToggle = (isCollapsed) => {
  navWidth.value = isCollapsed ? '64px' : '180px';
};
</script>

<style scoped>
.top-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 0;
  height: auto;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  z-index: 1001;
}

.sidebar-container {
  position: fixed;
  top: 60px; /* Match header height */
  left: 0;
  bottom: 0;
  box-shadow: 2px 0 5px rgba(0,0,0,0.03);
  z-index: 1000;
  transition: width 0.3s ease;
  background-color: #fff;
  overflow: auto;
}

.content-wrapper {
  padding-top: 60px; /* Match header height */
  transition: margin-left 0.3s ease;
}

.main-body {
  padding: 0;
  background-color: #f5f7fa;
  flex-grow: 1; /* Ensure it takes up space */
}

.site-footer-container {
  padding: 0;
  height: auto;
}
</style>